<template>
  <div class="hello">
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="50">
      <li v-for="item in list">{{ item }}</li>
    </ul>
    <p class="page-infinite-loading" v-if="loading">
       <mt-spinner type="fading-circle"></mt-spinner>
       加载中...
    </p>
  </div>
</template>

<script>
import { InfiniteScroll,Spinner } from 'mint-ui';
  // Vue.use(InfiniteScroll);
export default {
  
  name: 'scroll',
  // 数据
  data () {
    return {
      msg: '支付',
      list:[],
      loading:false
    }
  },
  // 创建
  created () {
      
    
  },
  // 渲染
  mounted () {

  },
  // 销毁前
  beforeDestory () {

  },
  // 计算
  computed: {

  },
  // 方法
  methods: {
    loadMore(){
      this.loading = true;
      // setTimeout(() => {
      //   let last = this.list[this.list.length - 1];
      //   for (let i = 1; i <= 10; i++) {
      //     this.list.push(last + i);
      //   }
      //   this.loading = false;
      // }, 2500);
    }
  },
  // 子组件
  components: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h1, h2 {
  font-weight: normal;
  a{
    font-size:16px;
  }
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
    margin: 0 10px;
    height: 50px;
}
a {
  color: #42b983;
}
.test{
  width:750px;
  height:300px;
  background:blue;
  font-size:50px;
}
.page-infinite-loading{
  font-size: 25px;
}
</style>
